<template>
	<el-dialog :visible.sync="hasDeposit" width="672px" top="20vh" :show-close="false" custom-class="pc_deposit_page">
		<div class="logo_box">
			<i class="el-icon-close" @click="handleClose()"></i>
		</div>
		<div class="h1">
			{{$t('deposit.navTitle')}}
		</div>
		<div class="page_cont">
			<div class="sw_but_box">
				<div class="sw_item">
					<div class="sw_title">{{$t('deposit.depositCurrency')}}</div>
					<el-select v-model="activeCoin" placeholder="请选择" popper-class="option_list">
						<img src="@/assets/images/home/usdt.png" style="width: 20px;height: 20px;vertical-align: sub;"
							slot="prefix" />
						<el-option v-for="item in coinList" :key="item" :label="item" :value="item">
							<img src="@/assets/images/home/usdt.png"
								style="width: 20px;height: 20px;margin-right: 5px;vertical-align: sub;" />
							{{item}}
						</el-option>
					</el-select>
				</div>
				<div class="sw_item">
					<div class="sw_title">{{$t('deposit.chooseNetwork')}}</div>
					<el-select v-model="activeNetwork" placeholder="请选择" popper-class="option_list">
						<img :src="getObj ? getObj.logo : ''" style="width: 20px;height: 20px;vertical-align: sub;" slot="prefix" />
						<el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="item.id">
							<img :src="item.logo" style="width: 20px;height: 20px;margin-right: 5px;vertical-align: sub;" />
							{{item.name}}
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- <el-popover placement="bottom" width="160" trigger="click" :visible-arrow="false" popper-class="tick"
					v-model="hasCoin"> -->
			<!-- <div class="slot" slot="reference">
						{{$t('deposit.depositCurrency')}}
						<el-button>
							<img src="@/assets/images/home/usdt.png" class="coin" />
							<p>USDT</p>
							<i class="el-icon-arrow-down"></i>
						</el-button>
					</div> -->
			<!-- <div class="time_item coin_box" :class="activeCoin == index ? 'active' : ''" v-for="(item,index) in coinList"
						:key="index" @click="handleCoin(index)">
						<img src="@/assets/images/home/usdt.png" class="coin" />
						<span>{{item}}</span>
					</div> -->
			<!-- </el-popover> -->
			<!-- <el-popover placement="bottom" width="160" trigger="click" :visible-arrow="false" popper-class="tick"
					v-model="hasNetwork">
					<div class="slot" slot="reference">
						{{$t('deposit.chooseNetwork')}}
						<el-button>
							<img :src="networkList[activeNetwork]?.logo" class="coin" />
							<p>{{networkList[activeNetwork]?.name}}</p>
							<i class="el-icon-arrow-down"></i>
						</el-button>
					</div>
					<div class="time_item coin_box" :class="activeNetwork == index ? 'active' : ''"
						v-for="(item,index) in networkList" :key="index" @click="handleNetwork(index)">
						<img :src="item.logo" class="coin" />
						<span>{{item.name}}</span>
					</div>
				</el-popover> -->
		</div>
		<div class="qr_box">
			<div class="qrcode">
				<img :src="qrcodeUrl" id="qrcodeUrl" class="qrcodeUrl" />
			</div>
			<div class="info_box">
				<div class="add_box_title">
					{{$t('deposit.chooseNetwork')}}
				</div>
				<div class="address">
					<p>
						{{networkList[activeNetwork]?.address}}
					</p>
					<el-button
						@click="$utils.copy(networkList[activeNetwork]?.address); $message.success($t('success'));">{{$t('deposit.copy')}}</el-button>
				</div>
				<div class="address2">
					<img src="@/assets/images/home/tips.png" />
					{{$t('deposit.minimumDeposit')}}: 10.00 USDT
				</div>
			</div>
		</div>
		<div class="tips_box">
			<div class="not">
				<!-- <i class="el-icon-warning-outline"></i> -->
				<img src="@/assets/images/home/tips2.png" />
				{{$t('deposit.notice')}}
			</div>
			<div class="info">
				{{$t('deposit.noticeText')}}
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import Qrcode from 'qrcode'
	import {
		marketNetworks
	} from '@/api/home'
	export default {
		props: {},
		components: {},
		data() {
			return {
				hasCoin: false,
				hasNetwork: false,
				activeNetwork: 1,
				activeCoin: 'USDT',
				qrcodeUrl: '',
				networkList: [],
				coinList: ['USDT']
			}
		},
		computed: {
			hasDeposit: {
				get() {
					return this.$store.state.hasDeposit
				},
				set(val) {
					this.$store.commit('changeDeposit', false)
				}
			},
			windowWidth() {
				return this.$store.state.windowWidth
			},
			getObj() {
				let find = this.networkList.find(i => i.id == this.activeNetwork)
				return find
			}
		},
		watch: {},
		mounted() {
			this.getNetWork()
		},
		methods: {
			handleClose() {
				this.$store.commit('changeDeposit', false)
			},
			handleCoin(index) {
				this.activeCoin = index
			},
			handleNetwork(index) {
				this.activeNetwork = index
				this.getImg()
				this.hasNetwork = false
			},
			getImg() {
				Qrcode.toDataURL(
					this.networkList[this.activeNetwork].address, {
						width: 120,
						height: 120,
						margin: 2
					},
					(err, url) => {
						if (err) {
							throw err
						}
						this.qrcodeUrl = url
					}
				)
			},
			async getNetWork() {
				const res = await marketNetworks()
				console.log('res', res);
				if (res && res.code == 1) {
					console.log('networkList', res);
					this.networkList = res.data
					this.getImg()
				}
			}
		}
	}
</script>

<style lang="less">
	.pc_deposit_page {
		position: relative;
		background: #1C232E;
		border-radius: 18px;

		.el-dialog__body {
			padding: 30px;
		}

		.el-dialog__header {
			display: none;
		}

		.logo_box {
			position: absolute;
			right: 30px;
			top: 30px;
			cursor: pointer;

			i {
				font-size: 24px;
				color: #fff;
				font-weight: bold;
			}
		}

		.h1 {
			font-family: PingFang SC;
			font-size: 24px;
			margin-bottom: 25px;
			text-align: left;
			color: #fff;
			font-weight: bold;
		}

		.page_cont {
			// padding: 30px 30px 5px;
		}

		.sw_but_box {
			display: flex;
			align-items: center;
			margin-bottom: 12px;

			.sw_item {
				flex: 1;
				margin-right: 12px;

				.sw_title {
					font-size: 14px;
					color: #999CA0;
					margin-bottom: 15px;
					text-align: left;
				}

				.el-select {
					width: 100%;

					.el-input__inner {
						height: 42px;
						line-height: 42px;
						border-radius: 12px;
						background-color: #12171D;
						border: 0;
						color: #fff;
					}
				}

				.el-input__prefix {
					display: flex;
					align-items: center;
					padding-left: 5px;
				}

				.el-input--prefix .el-input__inner {
					padding-left: 38px;
				}
			}

			.sw_item:last-of-type {
				margin-right: 0;
			}

		}

		.qr_box {
			padding: 30px;
			background-color: #12171D;
			margin-bottom: 20px;
			display: flex;
			border-radius: 12px;


			.qrcode {
				// margin-bottom: 40px;

				.qrcodeUrl {
					width: 120px;
				}
			}

			.info_box {
				margin-left: 30px;
			}

			.add_box_title {
				font-size: 14px;
				text-align: left;
				margin-bottom: 6px;
				color: #999CA0;
			}

			.address {
				display: flex;
				align-items: center;
				padding: 11px 15px;
				background-color: #161D26;
				border-radius: 10px;
				margin-bottom: 6px;

				p {
					max-width: 80%;
					word-wrap: break-word;
					text-align: left;
					color: #fff;
				}

				.el-button {
					width: 46px;
					height: 26px;
					background-color: #137EFE;
					border-radius: 6px;
					padding: 5px;
					border: 0;
					color: #fff;
					font-size: 12px;
					margin-left: 15px;
				}
			}

			.address2 {
				display: flex;
				align-items: center;
				padding: 5px 15px;
				background-color: #161D26;
				border-radius: 10px;

				img {
					width: 18px;
					margin-right: 5px;
				}
			}
		}

		.tips_box {

			.not {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: bold;
				color: #fff;
				margin-bottom: 10px;

				i {
					color: orangered;
					margin-right: 5px;
					font-weight: bold;
					font-size: 14px;
					color: #ff5449;
				}
				
				img {
					width: 18px;
					margin-right: 7px;
				}
			}

			.info {
				font-size: 14px;
				color: #999CA0;
				text-align: left;
			}
		}
	}
</style>

<style lang="less">
	body .time_item {
		&.coin_box {
			padding-left: 0;
		}

		.coin {
			width: 20px;
			margin-right: 10px;
			flex-shrink: 0;
		}

	}

	body .option_list {
		border: 0;
		border-radius: 12px;
		background-color: #212A36;

		.popper__arrow {
			display: none;
		}

		.el-select-dropdown__item {
			width: calc(100% - 12px);
			margin-left: 6px;
			color: #A4A8AB;
			line-height: 42px;
			height: 42px;
		}

		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			background-color: #293444;
			width: calc(100% - 12px);
			border-radius: 6px;
			margin-left: 6px;
			color: #fff;
		}
	}
	
</style>